<template>
  <view class="index">
    <uv-status-bar bgColor="#ff7a66"></uv-status-bar>
    <fNavbar></fNavbar>
    <!-- 头部 end -->
    <view class="index-header">
      <view class="index-tabs">
        <view class="index-tabs-item" @click="onTabsChange(index)" v-for="(item, index) in list">
          <text class="text" :class="{ 'index-tabs-item-active': current === index }">
            {{ item.name }}
          </text>
          <!-- <uv-icon name="jiantou" custom-prefix="custom-icon" color="#fff" size="18" v-if="current === index"></uv-icon> -->
        </view>
        <view class="index-tabs-active" :style="{ left: `${[12, 62][current]}%` }"></view>
      </view>
      <!-- <view class="index-header-icon" @click="onClickSearch">
        <uv-icon name="sousuo1" custom-prefix="custom-icon" color="#fff" size="27"></uv-icon>
      </view> -->
      <view class="index-header-search" :class="{ search: search.show }">
        <view class="search-box">
          <input
            v-model="params.query"
            ref="searchRef"
            :focus="search.show"
            class="input"
            placeholder="输入查询内容"
            @confirm="onConfirmSearch"
            confirm-type="search"
          />
          <view class="btn" @click="onClickSearch">搜索</view>
        </view>
      </view>
    </view>
    <view class="index-swiper">
      <swiper :current="current" @change="change" class="h-100">
        <swiper-item class="swiper-item">
          <!-- 课程 -->
          <scroll-view scroll-y :scroll-top="scrollTop[0]" class="h-100" @scrolltolower="onScrolltolower" @scroll="onScroll">
            <course v-model="current" ref="courseRef"></course>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" :scroll-top="scrollTop[1]" @scrolltolower="onScrolltolower" @scroll="onScroll">
            <!-- <teacher v-model="current" ref="teacherRef"></teacher> -->
            <course2 v-model="current" ref="teacherRef"></course2>
          </scroll-view>
        </swiper-item>
        <!-- <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" @scrolltolower="onScrolltolower">
            <danceRoom v-model="current" ref="danceRoomRef"></danceRoom>
          </scroll-view>
        </swiper-item> -->
      </swiper>
    </view>
    <!-- 搜索 -->
    <!-- <view class="index-screen" :class="{ 'index-screen-show': screenShow }">
      <view class="index-screen-content">
        <screen v-model="current" @onScreenChange="onScreenChange"></screen>
      </view>
    </view> -->
  </view>
  <!-- <view class="server">
    <button open-type="contact" class="uv-reset-button server-button"><uv-icon name="server-man" color="#fff" size="28"></uv-icon></button>
  </view> -->
</template>

<script setup>
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
  import { onLoad, onReady, onPullDownRefresh, onReachBottom, onShareTimeline } from '@dcloudio/uni-app';
  import { shareTimeline } from '@/common/js/fn';
  import { reactive, computed, ref, nextTick } from 'vue';
  import { onHide, onShow, onTabItemTap } from '@dcloudio/uni-app';
  // import screen from './index2Compontents/screen.vue';
  // import teacher from './index2Compontents/teacher.vue';
  // import danceRoom from './index2Compontents/danceRoom.vue';
  import fNavbar from './index2Compontents/f-navbar.vue';
  import course from './index2Compontents/course.vue';
  import course2 from './index2Compontents/course2.vue';
  import store from '@/store/index.js'; //需要引入store
  let { state, commit } = store;
  let scrollTop = ref([0, 0]);
  let scrollOldTop = ref([0, 0]);
  onShareTimeline(() => {
    return shareTimeline();
  });
  let current = ref(0);
  let search = reactive({
    show: false
  });
  let courseRef = ref('');
  let teacherRef = ref();
  let danceRoomRef = ref();
  let screenShow = ref(false);
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    query: '',
    screenObj: {}
  });
  let arr = [courseRef, teacherRef, danceRoomRef];
  let list = [{ name: '发现' }, { name: '课程' }];
  // 请求舞种数据
  const httpDances = async () => {
    let data = await uni.$uv.http.post('app/setting/dances', { classify: 1 });
    commit('$uStore', {
      name: 'vuex_dances',
      value: data
    });
  };
  const httpUser = async () => {
    let data = await uni.$uv.http.post('app/wechat/user');
    commit('$uStore', {
      name: 'vuex_user',
      value: data
    });
  };
  const change = ({ detail }) => {
    current.value = detail.current;
  };
  const onTabsChange = index => {
    // 如果当前重复点击当前项目。展开搜索
    // if (current.value === index) {
    //   screenShow.value = true;
    //   return;
    // }
    params.query = '';
    current.value = index;
  };
  let isInit = ref(false);
  // 这里加了这个会导致，滚动到下面的会变成第一页
  onShow(() => {
    if (isInit.value) {
      isInit.value = false;
      return;
    }
    // 如果这里显示了，调用一下子组件的更新方法，因为一直反馈说首页里面的数据收藏了，返回到首页，数据没变。
    arr[current.value].value.sonChange({
      type: 'update',
      val: {}
    });
  });
  onTabItemTap(() => {
    scrollTop.value[current.value] = scrollOldTop.value[current.value];
    nextTick(() => {
      scrollTop.value[current.value] = 0;
    });
    arr[current.value].value.sonChange({
      type: 'search',
      val: {}
    });
  });
  onLoad(async () => {
    isInit.value = true;
    httpUser();
    httpDances();
    // this.$refs.swiper.open();
    // swiper.value.open();
    // 每一次进来都请求一次地址,这里不做持久化的。不然第二次进来还是老地址
    if (JSON.stringify(state.vuex_position) === '{}') {
      // 获取地理位置
      uni.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        success: res => {
          commit('$uStore', {
            name: 'vuex_position',
            value: {
              longitude: res.longitude,
              latitude: res.latitude
            }
          });
          init();
        },
        fail: res => {
          init();
          uni.showToast({
            title: res.errMsg,
            icon: 'none'
          });
        }
      });
      return;
    }
    init();
  });
  const onScreenChange = val => {
    // 储存筛选的数据用于传值
    params.screenObj = val;
    screenShow.value = false;
    arr[current.value].value.sonChange({
      type: 'search',
      val
    });
  };
  const init = () => {
    setTimeout(() => {
      nextTick(() => {
        arr = [courseRef, teacherRef, danceRoomRef];
        arr[current.value].value.sonChange({
          type: 'search',
          val: { keyword: params.query }
        });
      });
    });
  };
  // 点击搜索
  const onClickSearch = () => {
    search.show = !search.show;
    if (!search.show) {
      arr[current.value].value.sonChange({
        type: 'search',
        val: { keyword: params.query }
      });
    }
  };
  // 滚动到底部触发
  const onScrolltolower = () => {
    arr[current.value].value.sonChange({
      type: 'scrollDown'
    });
  };
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail }) => {
    scrollOldTop.value[current.value] = detail.scrollTop;
    debounce(() => {
      arr[current.value].value.sonComputerEventFn(detail);
    }, 100);
  };
</script>

<style scoped lang="scss">
  .index {
    background-color: $dance-bg-color;
    height: 100vh;
    color: #fff;
    display: flex;
    flex-direction: column;
    &-header {
      height: 78rpx;
      line-height: 78rpx;
      padding-left: 61rpx;
      padding-right: 44rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px rgba(0, 0, 0, 0.25);
      position: relative;
      &-icon {
        text-align: right;
      }
      &-search {
        position: absolute;
        z-index: 99;
        left: -100%;
        top: -100%;
        transition: all 0.3s;
        width: 100%;
        height: 100%;
      }
      .search {
        left: 0;
        top: 0;
        background-color: $dance-bg-color;
        &-box {
          background-color: #646464;
          border-radius: 35rpx;
          display: flex;
          align-items: center;
          margin: 17rpx;
          justify-content: space-between;
          height: 70%;
          box-sizing: border-box;
          .input {
            margin: 0 35rpx;
            flex: 1;
          }
          .btn {
            background-color: $dance-main-color;
            border-radius: 35rpx;
            margin-right: 8.5rpx;
            text-align: center;
            width: 99rpx;
            height: 56rpx;
            line-height: 56rpx;
          }
        }
      }
    }
    &-tabs {
      display: flex;
      justify-content: space-between;
      color: #fff;
      border-radius: 105rpx;
      position: relative;
      transition: all 0.3s;
      width: 100%;
      &-item {
        flex: 1;
        text-align: center;
        transition: all 0.3s;
        z-index: 1;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          margin-right: 2px;
        }
      }

      &-item-active {
        font-weight: bold;
      }

      &-active {
        position: absolute;
        width: 162rpx;
        height: 100%;
        background-color: $dance-main-color;
        transition: all 0.3s;
        border-radius: 0 0 47rpx 47rpx;
        z-index: 0;
        top: -14rpx;
      }
    }
    &-swiper {
      flex: 1;
      display: inline-grid;
    }

    &-screen {
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      transform: translate(0%, -100%);
      z-index: 999;
      opacity: 1;
      position: fixed;
      display: flex;
      flex-direction: column;
      inset: 0px;
      justify-content: center;
      align-items: center;
      transition: opacity 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
      &-content {
        width: 689rpx;
        height: 1047rpx;
      }
    }
    &-screen-show {
      transform: translate(0%, 0%);
    }
  }
  .h-100 {
    height: 100%;
  }
  .server {
    position: fixed;
    bottom: 10%;
    right: 35rpx;
    border-radius: 50%;
    height: 87rpx;
    width: 87rpx;
    overflow: hidden;
    &-button {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff7a66;
    }
  }
</style>
